import React, { Component } from 'react';
import { BrowserRouter as Router, Route, NavLink, Redirect, BrowserRouter } from 'react-router-dom'
import boy from '../css/Boy.module.css'
import { Pagination } from 'antd';
import axios from 'axios'
export default class Boy extends Component {
    constructor(props) {
        super(props)
        this.state = {
            list: [],
            page: 0
        }
    }
    componentWillMount() {
        let _this = this
        axios({
            method: 'get',
            url: 'http://api.cat-shop.penkuoer.com/api/v1/products',
            params: { per: 12, page: 1 }
        }).then(function (data) {
            console.log(data.data)
            _this.setState({
                list: data.data.products,
                page: data.data.totalCount
            })
            console.log(data)
        })
    }
    render() {
        return (
            <BrowserRouter forceRefresh={true}>
                <div>
                    <div className={boy.pc}>
                        <div className={boy.pccenter}>
                            <h2>男孩专区</h2>
                        </div>
                    </div>
                    <div className={boy.hotsp}>
                        <div className={boy.hotspcenter}>
                            {this.state.list.map(function (item, i) {
                                return (
                                    <div className={boy.hotspimg} key={i}>
                                        <NavLink to={'/item/' + item._id} >
                                            <div className={boy.bimg}>
                                                <img src={item.coverImg} />
                                            </div>
                                            <div className={boy.hotspimgmony}>
                                                <p>销量：<b>{item.quantity}</b></p>
                                                <p>￥<em>{item.price}.00</em></p>
                                            </div>
                                            <div className={boy.hotspdesc}>
                                                <p>{item.name}</p>
                                            </div>
                                        </NavLink>
                                    </div>
                                )
                            })}
                        </div>
                    </div>
                    <div className={boy.page}>
                        <div className={boy.pagecenter}>
                            <Pagination defaultCurrent={1} total={this.state.page} defaultPageSize={12} onChange={this.page.bind(this)} />
                        </div>
                    </div>
                </div>
            </BrowserRouter >
        )
    }
    page(e) {
        let _this = this
        axios({
            method: 'get',
            url: 'http://api.cat-shop.penkuoer.com/api/v1/products',
            params: { per: 12, page: e }
        }).then(function (data) {
            console.log(data.data)
            _this.setState({
                list: data.data.products,
                page: data.data.totalCount
            })
            console.log(data)
        })
    }
}